import { Helmet } from '@umijs/max'
import React from 'react'

interface SEOProps {
  title?: string
  description?: string
  keywords?: string
  image?: string
  url?: string
  children?: React.ReactNode
}

/**
 * SEO组件，用于设置页面的标题、描述、关键词等信息
 */
export const SEO: React.FC<SEOProps> = ({
  title = 'Zusheng Studio - 创意设计与摄影作品集',
  description = 'Zusheng Studio是一个展示创意设计、摄影作品与文章的个人网站。这里记录了设计、摄影和创意的点滴。',
  keywords = 'Zusheng,设计,摄影,创意,作品集,文章,个人网站',
  image = 'https://zusheng.cc/logo.png',
  url = 'https://zusheng.cc',
  children
}) => {
  const fullTitle = title.includes('Zusheng Studio') ? title : `${title} - Zusheng Studio`

  return (
    <Helmet>
      {/* 基本Meta标签 */}
      <title>{fullTitle}</title>
      <meta name="description" content={description} />
      <meta name="keywords" content={keywords} />
      
      {/* Open Graph标签 - 用于社交媒体分享 */}
      <meta property="og:title" content={fullTitle} />
      <meta property="og:description" content={description} />
      <meta property="og:image" content={image} />
      <meta property="og:url" content={url} />
      <meta property="og:type" content="website" />
      
      {/* Twitter卡片标签 */}
      <meta name="twitter:card" content="summary_large_image" />
      <meta name="twitter:title" content={fullTitle} />
      <meta name="twitter:description" content={description} />
      <meta name="twitter:image" content={image} />
      
      {/* 规范链接 - 防止重复内容问题 */}
      <link rel="canonical" href={url} />
      
      {children}
    </Helmet>
  )
} 